<template>
  <van-tabbar fixed route v-model="active" @change="handleChange">
    <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon-prefix="'icon'" :key="index">
      <div>
        <div>
          <svg-icon :icon="`${active === index ? item.iconActive : item.icon}`"></svg-icon>
        </div>
        <div>{{ item.title }}</div>
      </div>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: 'TabBar',
  props: {
    defaultActive: {
      type: Number,
      default: 0
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      active: this.defaultActive
    }
  },
  created() {
    console.log(this.active)
  },
  methods: {
    handleChange(value) {
      console.log(value, 'vvv')
      this.$emit('change', value)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.van-tabbar {
  background-color: $main-bc;
  height: 50px;
  .van-tabbar-item {
    font-size: 12px;
    color: #7981bf;
    &.van-tabbar-item--active {
      color: #fff;
      background-color: $main-bc;
    }
  }
  .svg-icon {
    width: 20px;
    height: 20px;
    display: block;
    margin: 0px auto 4px;
  }
}
</style>
